<template>
  <div class="search-page">
    <div class="back-ground">
      <div class="content">
        <div class="table-content">
          <div class="content-title">
            标准总数: {{allNum}}个
          </div>
          <div class="table-list">
<!--            @click="handleGetNumById(index)"-->
            <view class="charts-box" v-for="(item,index) of tableList" v-show="item.series[0].data.length !== 0">
                <qiun-data-charts
                    v-if="index !== 1"
                    type="column"
                    :chartData="item"
                    :ontouch="true"
                    :loadingType="0"
                    :canvasId='"yydsyydsyydsyydsyydsyydsyydsyyd" + index'
                    :canvas2d="true"
                    :errorShow="false"
                    :errorReload="false"
                    background="none"
                    :animation="false"
                    :tooltipShow="false"
                    @getIndex="handleAddTable($event,item,index)"
                />
                <qiun-data-charts
                    v-if="index === 1"
                    type="pie"
                    :canvas2d="true"
                    :canvasId='"yydsyydsyydsyydsyydsyydsyydsyys" + index'
                    :chartData="item"
                    background="none"
                />
            </view>
          </div>
        </div>
      </div>
    </div>
    <div class="button-around">
      <div
          class="select-button"
          @click="handleDetailedClick"
      >
        明细
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SearchPage",
  data() {
    return {
      allNum: 0,
      pieList: {
        "series": [
          {
            "data": [
              {
                "name": "一班",
                "value": 50
              },
              {
                "name": "二班",
                "value": 30
              },
              {
                "name": "三班",
                "value": 20
              },
              {
                "name": "四班",
                "value": 18
              },
              {
                "name": "五班",
                "value": 8
              }
            ]
          }
        ]
      },
      tableList: [],
      chartDataEffective: {},
      chartsDataColumn1: {},
      chartData: {}
      ,
    };
  },

  onLoad(option) {
    const fitList = {}
    const list = JSON.parse(option.submitList)
    if(list.tab === 0){
        for(const tis in list){
          if(tis === 'tab'||tis === 'implement_date_start'||tis === 'implement_date_end'||tis === 'release_date_start'||
              tis === 'release_date_end'||tis === 'department'||tis === 'under_centralized'||tis === 'effective'){
            fitList[tis] = list[tis]
          }
        }
    }
    if(list.tab === 1){
        for(const tis in list){
          if(tis === 'tab'||tis === 'clazz'||tis === 'subclass'||tis === 'groups'||tis === 'category'){
            fitList[tis] = list[tis]
          }
        }
    }
    if(list.tab === 2){
        for(const tis in list){
          if(tis === 'tab'||tis === 'type'||tis === 'subtype'){
            fitList[tis] = list[tis]
          }
        }
    }
    if(list.tab === 3){
        for(const tis in list){
          if(tis === 'tab'||tis === 'subgroup'||tis === 'obj'){
            fitList[tis] = list[tis]
          }
        }
    }
    this.submitList = fitList
    this.handleGetTableInfo(fitList);
  },
  methods: {
    handleAddTable(e,data,index){
      if(index !== 4&&index !== 5&&index !== 6)return
      wx.navigateTo({
        url: "/pages/numDetailPage?index=" + index + '&list=' + JSON.stringify(this.submitList) + '&search=' + e.opts.categories[e.currentIndex.index]
      });

    },
    handleGetAroundTable(list){
      const dataList = list.data.map((item) => {
        return {name: item.x,value: item.y}
      })
      const series = [
            {data: dataList}
        ]
      this.tableList.push({series})
    },
    handleGetTableInfoList(list) {
      const categories = list.data.map((item) => {
        return item.x;
      });
      const data = list.data.map((item) => {
        return item.y;
      });
      const series = [
        {name: list.key, data}
      ];
      this.tableList.push({
        categories, series
      });
    },
    // 获取图表数据
    async handleGetTableInfo(list) {
      Object.getOwnPropertyNames(list).forEach((item) => {
        if(typeof list[item] !== 'string')return
        if (list[item].indexOf("选择") !== -1) {
          delete list[item];
        }
      });
      this.$api.userPortalGetListByCon(list).then((res) => {
        this.allNum = res.data.total;
      });
      //年度数量
      this.$api.userPortalGetAnnualNumber(list).then((res) => {
        this.handleGetTableInfoList(res.data);
        //有效性
        this.$api.userPortalGetEffective(list).then((res) => {
          this.handleGetAroundTable(res.data);
          //司局
          this.$api.userPortalGetDepartment(list).then((res) => {
            this.handleGetTableInfoList(res.data);
            this.$api.userPortalGeUnderCentralizedNum(list).then((res) => {
              this.handleGetTableInfoList(res.data);
              this.$api.userPortalGeClazz(list).then((res) => {
                this.handleGetTableInfoList(res.data);
                this.$api.userPortalGetGroupNum(list).then((res) => {
                  this.handleGetTableInfoList(res.data);
                  this.$api.userPortalGetType(list).then((res) => {
                    this.handleGetTableInfoList(res.data);
                  });
                })
              })
            });
          });
        });
      });


    },
    handleDetailedClick() {
      wx.navigateTo({
        url: "/pages/detailedPage?list=" + JSON.stringify(this.submitList)
      });
    }
  }
};
</script>

<style scoped lang="scss">
/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
.charts-box {
  margin-top: 40rpx;
  width: 100%;
  height: 450px;
}

.search-page {
  min-height: 100%;

    .select-button {
      color: #FFFFFF;
      z-index: 999;
      width: 100%;
      height: 75rpx;
      border-radius: 16rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #59AC35;
    }
  .back-ground {
    background-image: linear-gradient(#6ACC40, #59AC35);
    height: 160rpx;
    width: 100%;

    .content {
      position: absolute;
      z-index: 99;
      width: 100%;
      flex-direction: column;
      min-height: 100%;
      background-color: transparent;
      display: flex;
      padding: 24rpx 24rpx 80rpx 24rpx;

      .table-content {
        border-radius: 16rpx;
        width: 100%;
        display: flex;
        flex-direction: column;
        min-height: 100%;
        background-color: #FFFFFF;

        .content-title {
          padding: 24rpx;
          border-radius: 16rpx 16rpx 0 0;
          border-bottom: 2rpx #EEEEEE solid;
          height: 100rpx;
          background-color: #FFFFFF;
          font-size: 40rpx;
          font-weight: 700;
          color: #59AC35;
          display: flex;
          align-items: start;
          width: 100%;
        }

        .table-list {
          min-height: 100%;
          width: 100%;
          align-items: center;
          padding: 24rpx 24rpx 100rpx 24rpx;
          display: flex;
          flex-direction: column;
          background-color: #FFFFFF;
        }
      }
    }
  }
}

</style>
